<template>
    <div>
        <el-dialog
                title="修改员工信息"
                :visible.sync="updateShow"
                :show-close="false"
                :before-close="handleClose">
            <el-form :model="updateEmployeeForm"
                     label-position="right"
                     :rules="rules"
                     label-width="100px" ref="ruleForm">
                <el-form-item label="员工名称" prop="name">
                    <el-input v-model="updateEmployeeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="员工手机号" prop="phone">
                    <el-input v-model="updateEmployeeForm.phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button @click="submit">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {updateEmployee} from '@/utils/apis/employee'

    export default {
        name: "EmployeeUpdate",
        data() {
            return {
                rules: {
                    name: [
                        {required: true, message: '请输入员工名称', trigger: 'blur'},
                        {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {
                            validator: function (rule, value, callback) {
                                if (!/^1[3456789]\d{9}$/.test(value)) {
                                    callback(new Error("请输入正确的手机号"));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur'
                        },

                    ],
                },
            }
        },
        props: ['updateEmployeeForm', 'updateShow'],
        methods: {
            handleClose() {
                this.$refs['ruleForm'].clearValidate()
                this.cancel()
            },
            cancel() {
                this.$notify.info('取消修改')
                this.$emit('cancel')
            },
            submit() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        const employee = {
                            id: this.updateEmployeeForm.employeeId,
                            name: this.updateEmployeeForm.name,
                            phone: this.updateEmployeeForm.phone,
                            type: this.updateEmployeeForm.type
                        }
                        const userInfo = JSON.parse(localStorage.getItem('adminInfo'))
                        updateEmployee(employee).then(res => {
                            this.$message.success('修改成功')
                        })
                        if (userInfo.name === this.updateEmployeeForm.name) {
                            localStorage.removeItem("adminInfo")
                            localStorage.removeItem("token")
                            this.$router.replace('/login')
                            this.$message.success('修改完成,重新登录')
                        }
                        this.$emit('cancel')
                    }
                })
            }
        }
    }
</script>

<style scoped>
</style>